<template>
  <div>
    <div class="FixedBox">
      <span class="FixedBoxLine"></span>工价规则：
      <span class="Name">{{ salaryRuleName || "--" }}</span>

      <a-popover placement="top" trigger="hover">
        <template slot="content">
          <div>当前使用的规则详情</div>
        </template>
        <i class="iconfont icon-wenhao iconfontStyle" />
      </a-popover>
    </div>
    <a-table :columns="columns" :data-source="data" :pagination="paginationOpt1"></a-table>
    <div class="FixedBox">
      <span class="FixedBoxLine"></span>招工劳务费规则：
      <span class="Name">{{ serviceFeeRuleName || "--" }}</span>

      <a-popover placement="top" trigger="hover">
        <template slot="content">
          <div>当前使用的规则详情</div>
        </template>
        <i class="iconfont icon-wenhao iconfontStyle" />
      </a-popover>
    </div>
    <a-table :columns="columns" :data-source="data1" :pagination="paginationOpt2"></a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "生效时间",
    dataIndex: "timeShow",
    key: "timeShow",
    width: 100
  },
  {
    title: "基础规则",
    dataIndex: "hourAmountRuleShow",
    key: "hourAmountRuleShow1",
    width: 120
  },
  {
    title: "离职规则",
    dataIndex: "leaveOfficeRuleShow",
    key: "leaveOfficeRuleShow",
    width: 120
  }
];
import { salaryCalculateRules, empInfosShow, listAllByEmpId, getsalaryCalculateRuleGroups } from "./api";
export default {
  data() {
    return {
      empInfo: {},
      defaultEmpId: "",
      companyId: "",
      salaryRuleName: "",
      serviceFeeRuleName: "",
      data: [],
      data1: [],
      salaryRuleId: "",
      serviceFeeRuleId: "",
      columns,
      paginationOpt1: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,

        pageSizeOptions: ["5", "10", "20"],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt1.current = 1;
          this.paginationOpt1.defaultCurrent = 1;
          this.paginationOpt1.defaultPageSize = pageSize;
          this.salaryCalculateRulesFun(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt1.current = current;
          this.paginationOpt1.defaultCurrent = current;
          this.paginationOpt1.defaultPageSize = size;
          this.salaryCalculateRulesFun();
        }
      },
      paginationOpt2: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,

        pageSizeOptions: ["5", "10", "20"],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt2.current = 1;
          this.paginationOpt2.defaultCurrent = 1;
          this.paginationOpt2.defaultPageSize = pageSize;
          this.serviceFeeRuleIdFun(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt2.current = current;
          this.paginationOpt2.defaultCurrent = current;
          this.paginationOpt2.defaultPageSize = size;
          this.serviceFeeRuleIdFun();
        }
      }
    };
  },
  mounted() {},
  methods: {
    empInfosShowFun(defaultEmpId, companyId, empInfo) {
      this.defaultEmpId = defaultEmpId;
      this.companyId = companyId;
      this.empInfo = empInfo;

      const data = {
        companyId: companyId,
        empId: defaultEmpId
      };
      empInfosShow(data)
        .then(res => {
          if (res.data.entities.length === 0) {
            this.data = [];
          } else {
            if (res.data.entities[0].salaryRule) {
              this.salaryRuleId = res.data.entities[0].salaryRule.id;
              this.salaryRuleName = res.data.entities[0].salaryRule.name;
            } else {
              this.data = [];
            }
          }
        })
        .catch(err => {
          console.log("err", err);
        });
      this.serviceFeeRuleIdFun(); // 招工劳务费规则
      this.salaryCalculateRulesFun(); // 工价规则
    },
    serviceFeeRuleIdFun() {
      if (this.empInfo.serviceFeeRuleId) {
        getsalaryCalculateRuleGroups(this.empInfo.serviceFeeRuleId)
          .then(res => {
            this.serviceFeeRuleName = res.data ? res.data.name : null;
          })
          .catch(err => {
            console.log(err);
          });
        const data = {
          pageNo: this.paginationOpt2.current,
          pageSize: this.paginationOpt2.defaultPageSize,
          salaryCalculateRuleGroupId: this.empInfo.serviceFeeRuleId // "83D102B6CF6245B1B79E8B8BDEFA7F39"
        };
        salaryCalculateRules(data)
          .then(res => {
            this.data1 = res.data.entities;
            this.paginationOpt2.total = res.data.entityCount;
          })
          .catch(err => {
            console.log("err", err);
          });
      } else {
        this.data1 = [];
        this.paginationOpt2.total = 0;
        this.serviceFeeRuleName = null;
      }
    },
    salaryCalculateRulesFun() {
      if (this.empInfo.salaryType === 2 || this.empInfo.salaryType === "2") {
        const data = {
          pageNo: this.paginationOpt1.current,
          pageSize: this.paginationOpt1.defaultPageSize,
          salaryCalculateRuleGroupId: this.empInfo.salaryRuleId // "83D102B6CF6245B1B79E8B8BDEFA7F39"
        };
        salaryCalculateRules(data)
          .then(res => {
            this.data = res.data.entities;
            this.paginationOpt1.total = res.data.entityCount;
          })
          .catch(err => {
            console.log("err", err);
          });
      } else {
        this.data = [];
        this.paginationOpt1.total = 0;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 14px;
  color: #767885;
  line-height: 21px;
  margin: 16px 0;
}
.Name {
  font-size: 14px;
  color: #3c3d43;
  margin-left: 8px;
}
.FixedBox {
  margin-top: 20px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  .FixedBoxLine {
    width: 3px;
    height: 20px;
    background: var(--primary);
    border-radius: 2px;
    display: inline-block;
    margin-right: 10px;
  }
}
.iconfontStyle {
  margin-left: 8px;
  font-size: 12px;
  color: #b5b5b5;
}
</style>
